<template>
  <el-dialog
      v-model="dialogVisible"
      :before-close="handleClose"
      title="设置最低销量"
      width="500px"
  >

    <el-form
        ref="refForm"
        :model="formData"
        class="demo-ruleForm"
        label-width="120px"
        rules="rule"
    >
      <el-form-item label="模式" prop="name">
        <el-radio v-model="formData.isIncrease" label="1" size="large" @change="radioChange">平均年销量</el-radio>
        <el-radio v-model="formData.isIncrease" label="2" size="large" @change="radioChange">递增模式</el-radio>
      </el-form-item>

      <el-form-item v-if="formData.isIncrease == 1" label="最低销量">
        <el-input v-model.number="formData.minSale" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入最低销量"
                  style="width: 100%">
          <template #append>
            <span style="margin-right: 10px">{{ getLabel('sell_unit', datas.sellUnit) }}/年</span>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item v-if="formData.isIncrease == 2" label="首年最低销量">
        <el-input v-model.number="formData.minSale" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入首年最低销量"
                  style="width: 100%">
          <template #append>
            <span style="margin-right: 10px">{{ getLabel('sell_unit', datas.sellUnit) }}/年</span>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item v-if="formData.isIncrease == 2" label="每年递增百分比">
        <div style="display: flex;align-items: center">
          <el-input v-model="formData.increaseNum" oninput="value=value.replace(/^\.+|[^\d.]/g,'')" placeholder="请输入每年递增百分比"
                    style="width: 100%"/>
          <span>%</span>
        </div>

      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="dialogConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'SellNumDialog',
  props: {
    datas: {
      type: Object,
      default: {}
    }
  },
  setup() {
    const rule = {
      minSale: [
        {required: true, message: '请输入最低销量', trigger: 'change'}
      ],
      increaseNum: [
        {required: true, message: '请输入每年递增百分比', trigger: 'change'}
      ]
    }
    var data = reactive({
      dialogVisible: false,
      formData: {
        isIncrease: '1',
        minSale: '',
        increaseNum: '',
      },
      radio: '1',
      row: {},
      refForm: null,
    })

    const open = (row) => {
      data.row = row
      data.formData.isIncrease = row.isIncrease
      data.formData.minSale = row.minSale
      data.formData.increaseNum = row.increaseNum
      data.dialogVisible = true
    }

    const handleClose = () => {
      data.formData = {
        isIncrease: '1',
        minSale: '',
        increaseNum: '',
      }
      data.dialogVisible = false
    }

    const dialogConfirm = () => {
      data.refForm.validate((value) => {
        if (value) {
          data.row.isIncrease = data.formData.isIncrease
          data.row.minSale = Number(data.formData.minSale)
          data.row.increaseNum = Number(data.formData.increaseNum)

          handleClose()
        }
      })
    }

    const radioChange = () => {
      data.formData.minSale = ''
    }

    return {
      rule,
      ...toRefs(data),

      handleClose,
      radioChange,
      open,
      dialogConfirm,
    }
  }
})
</script>

<style scoped>

</style>
